doctype html
html(lang='en')

    head

        meta(charset='utf-8')
        meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
        meta(name='description', content='')
        meta(name='author', content='')

        title Modern Business - Start Bootstrap Template

        // Favicon
        link(rel='icon', type='image/x-icon', href='assets/favicon.ico')

        include includes/css.pug

    body.d-flex.flex-column.h-100

        main.flex-shrink-0

            // Navigation
            include includes/navbar.pug

            // Header
            header.bg-dark.py-5
                .container.px-5
                    .row.gx-5.align-items-center.justify-content-center
                        .col-lg-8.col-xl-7.col-xxl-6
                            .my-5.text-center.text-xl-start
                                h1.display-5.fw-bolder.text-white.mb-2 A Bootstrap 5 template for modern businesses
                                p.lead.fw-normal.text-white-50.mb-4 Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit! 
                                .d-grid.gap-3.d-sm-flex.justify-content-sm-center.justify-content-xl-start
                                    a.btn.btn-primary.btn-lg.px-4.me-sm-3(href='#features') Get Started
                                    a.btn.btn-outline-light.btn-lg.px-4(href='#!') Learn More
                        .col-xl-5.col-xxl-6.d-none.d-xl-block.text-center
                            img.img-fluid.rounded-3.my-5(src='https://dummyimage.com/600x400/343a40/6c757d', alt='...')

            // Features section
            section#features.py-5
                .container.px-5.my-5
                    .row.gx-5
                        .col-lg-4.mb-5.mb-lg-0
                            h2.fw-bolder.mb-0 A better way to start building.
                        .col-lg-8
                            .row.gx-5.row-cols-1.row-cols-md-2
                                .col.mb-5.h-100
                                    .feature.bg-primary.bg-gradient.text-white.rounded-3.mb-3
                                        i.bi.bi-collection
                                    h2.h5 Featured title
                                    p.mb-0
                                        | Paragraph of text beneath the heading to explain the heading. Here is just a bit more text.
                                .col.mb-5.h-100
                                    .feature.bg-primary.bg-gradient.text-white.rounded-3.mb-3
                                        i.bi.bi-building
                                    h2.h5 Featured title
                                    p.mb-0
                                        | Paragraph of text beneath the heading to explain the heading. Here is just a bit more text.
                                .col.mb-5.mb-md-0.h-100
                                    .feature.bg-primary.bg-gradient.text-white.rounded-3.mb-3
                                        i.bi.bi-toggles2
                                    h2.h5 Featured title
                                    p.mb-0
                                        | Paragraph of text beneath the heading to explain the heading. Here is just a bit more text.
                                .col.h-100
                                    .feature.bg-primary.bg-gradient.text-white.rounded-3.mb-3
                                        i.bi.bi-toggles2
                                    h2.h5 Featured title
                                    p.mb-0
                                        | Paragraph of text beneath the heading to explain the heading. Here is just a bit more text.

            // Testimonial section
            .py-5.bg-light
                .container.px-5.my-5
                    .row.gx-5.justify-content-center
                        .col-lg-10.col-xl-7
                            .text-center
                                .fs-4.mb-4.fst-italic "Working with Start Bootstrap templates has saved me tons of development time when building new projects! Starting with a Bootstrap template just makes things easier!"
                                .d-flex.align-items-center.justify-content-center
                                    img.rounded-circle.me-3(src='https://dummyimage.com/40x40/ced4da/6c757d', alt='...')
                                    .fw-bold
                                        | Tom Ato
                                        span.fw-bold.text-primary.mx-1 /
                                        | CEO, Pomodoro

            // Blog preview section
            section.py-5
                .container.px-5.my-5
                    .row.gx-5.justify-content-center
                        .col-lg-8.col-xl-6
                            .text-center
                                h2.fw-bolder From our blog
                                p.lead.fw-normal.text-muted.mb-5 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque fugit ratione dicta mollitia. Officiis ad.
                    .row.gx-5
                        .col-lg-4.mb-5
                            .card.h-100.shadow.border-0
                                img.card-img-top(src='https://dummyimage.com/600x350/ced4da/6c757d', alt='...')
                                .card-body.p-4
                                    .badge.bg-primary.bg-gradient.rounded-pill.mb-2 News
                                    a.text-decoration-none.link-dark.stretched-link(href='#!')
                                        h5.card-title.mb-3 Blog post title
                                    p.card-text.mb-0
                                        | Some quick example text to build on the card title and make up the bulk of the card's content.
                                .card-footer.p-4.pt-0.bg-transparent.border-top-0
                                    .d-flex.align-items-end.justify-content-between
                                        .d-flex.align-items-center
                                            img.rounded-circle.me-3(src='https://dummyimage.com/40x40/ced4da/6c757d', alt='...')
                                            .small
                                                .fw-bold Kelly Rowan
                                                .text-muted March 12, 2023 &middot; 6 min read
                        .col-lg-4.mb-5
                            .card.h-100.shadow.border-0
                                img.card-img-top(src='https://dummyimage.com/600x350/adb5bd/495057', alt='...')
                                .card-body.p-4
                                    .badge.bg-primary.bg-gradient.rounded-pill.mb-2 Media
                                    a.text-decoration-none.link-dark.stretched-link(href='#!')
                                        h5.card-title.mb-3 Another blog post title
                                    p.card-text.mb-0
                                        | This text is a bit longer to illustrate the adaptive height of each card. Some quick example text to build on the card title and make up the bulk of the card's content.
                                .card-footer.p-4.pt-0.bg-transparent.border-top-0
                                    .d-flex.align-items-end.justify-content-between
                                        .d-flex.align-items-center
                                            img.rounded-circle.me-3(src='https://dummyimage.com/40x40/ced4da/6c757d', alt='...')
                                            .small
                                                .fw-bold Josiah Barclay
                                                .text-muted March 23, 2023 &middot; 4 min read
                        .col-lg-4.mb-5
                            .card.h-100.shadow.border-0
                                img.card-img-top(src='https://dummyimage.com/600x350/6c757d/343a40', alt='...')
                                .card-body.p-4
                                    .badge.bg-primary.bg-gradient.rounded-pill.mb-2 News
                                    a.text-decoration-none.link-dark.stretched-link(href='#!')
                                        h5.card-title.mb-3 The last blog post title is a little bit longer than the others
                                    p.card-text.mb-0
                                        | Some more quick example text to build on the card title and make up the bulk of the card's content.
                                .card-footer.p-4.pt-0.bg-transparent.border-top-0
                                    .d-flex.align-items-end.justify-content-between
                                        .d-flex.align-items-center
                                            img.rounded-circle.me-3(src='https://dummyimage.com/40x40/ced4da/6c757d', alt='...')
                                            .small
                                                .fw-bold Evelyn Martinez
                                                .text-muted April 2, 2023 &middot; 10 min read

                    // Call to action
                    aside.bg-primary.bg-gradient.rounded-3.p-4.p-sm-5.mt-5
                        .d-flex.align-items-center.justify-content-between.flex-column.flex-xl-row.text-center.text-xl-start
                            .mb-4.mb-xl-0
                                .fs-3.fw-bold.text-white New products, delivered to you.
                                .text-white-50 Sign up for our newsletter for the latest updates.
                            .ms-xl-4
                                .input-group.mb-2
                                    input.form-control(type='text', placeholder='Email address...', aria-label='Email address...', aria-describedby='button-newsletter')
                                    button#button-newsletter.btn.btn-outline-light(type='button') Sign up
                                .small.text-white-50 We care about privacy, and will never share your data.

        // Footer
        include includes/footer.pug

        include includes/scripts.pug
